<template>
  <div class="homebox">
    <img src="@/assets/images/bjd.png" alt="" class="bjd" />
    <!-- 通用顶部 -->
    <Headmain :ymbsid="ymbsid" />

    <!-- 锁定时间 按钮 -->
    <div class="suobox" @click="uploadshowfn">锁定时间</div>
    <!-- 选择日期 -->
    <div class="date-switcher">
      <div class="tool" @click="handleQuickChange('prev')">
        <img src="@/assets/images/preac.png" alt="" class="active" />
        <img src="@/assets/images/pre.png" alt="" class="normal" />
      </div>
      <span class="date-display" @click="dateselect = true"
        >{{ curYear }}年{{ curMonth + 1 }}月</span
      >
      <div class="tool" @click="handleQuickChange('next')">
        <img src="@/assets/images/nexac.png" alt="" class="active" />
        <img src="@/assets/images/nex.png" alt="" class="normal" />
      </div>
    </div>
    <div class="dateselectbox" v-if="dateselect">
      <icon-close class="closedate" @click="dateselect = false" />

      <div class="dateseletyear">
        <span>{{ curYear }}年</span>
        <div class="dateyearnew"
          ><icon-left
            @click="handleQuickChanges('prev')"
            style="cursor: pointer"
        /></div>
        <div class="dateyearnew"
          ><icon-right
            style="cursor: pointer"
            @click="handleQuickChanges('next')"
        /></div>
      </div>
      <div class="dataseletmont">
        <div
          @click="curMonth = item.value"
          class="dataseletmontitem"
          :class="curMonth == item.value ? 'dataseletmontitemhover' : ''"
          v-for="item in monthOptions"
          :key="item.key"
          >{{ item.value + 1 }}月</div
        >
      </div>
    </div>
    <!-- 月日历排版 -->
    <div class="calendar-tablebox">
      <div class="calendar-header">
        <div class="calendartop">
          <div
            class="week-item"
            v-for="(item, i) in weeks"
            :key="i"
            style="text-align: center"
            >{{ item }}</div
          >
        </div>
      </div>
      <div class="calendar-body">
        <div class="calendar-row" v-for="(dates, i) in res" :key="i">
          <div
            class="calendar-cell dfbox"
            v-for="(item, index) in dates"
            :key="index"
            :class="{
              notCurMonth: !item.isCurMonth,
              notCurMonths: item.isCurMonths,
              currentDay: item.date === curDate,
              selectDay: selectedDates == item.date,
              rangeSelectd: item.isRangeSelected,
              weekend: item.isWeekend,
            }"
            @mouseenter="handleItemMove(item)"
            @mouseleave="movefn()"
          >
            <div v-if="isLocked(item.date)" class="suobs">
              <img src="@/assets/images/suoding.png" alt="" />
              <div>锁定中</div>
            </div>
            <span style="z-index: 9" class="daybs">{{
              new Date(item.date).getDate().toString().padStart(2, '0')
            }}</span>
            <div class="xfboxs" v-show="xfdata.length && item.date == movedate">
              <div
                class="xfboxss"
                :key="items"
                v-show="index < 2"
                v-for="(items, index) in xfdata"
              >
                锁定： {{ formatDates(items.startTime) }}-{{
                  formatDates(items.endTime)
                }}
              </div>
              <div v-show="xfdata.length > 2" class="gogd" @click="gogd">
                查看更多{{ '>' }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="calendar-tablebox">
      <table class="calendar-table">
        <thead class="calendartop">
          <tr>
            <th
              v-for="(item, i) in weeks"
              :key="i"
              style="text-align: center"
              >{{ item }}</th
            >
          </tr>
        </thead>
        <tbody class="calendarbox">
          <tr v-for="(dates, i) in res" :key="i">
            <td
              class="dfbox"
              v-for="(item, index) in dates"
              :key="index"
              :class="{
                notCurMonth: !item.isCurMonth,
                notCurMonths: item.isCurMonths,
                currentDay: item.date === curDate,
                selectDay: selectedDates == item.date,
                rangeSelectd: item.isRangeSelected,
                weekend: item.isWeekend,
              }"
              @mouseenter="handleItemMove(item)"
              @mouseleave="movefn()"
            >
              <div v-if="isLocked(item.date)" class="suobs">
                <img src="@/assets/images/suoding.png" alt="" />
                <div>锁定中</div>
              </div>
              <span style="z-index: 9" class="daybs">{{
                new Date(item.date).getDate().toString().padStart(2, '0')
              }}</span>

              <div
                class="xfboxs"
                v-show="xfdata.length && item.date == movedate"
              >
                <div
                  class="xfboxss"
                  :key="items"
                  v-show="index < 2"
                  v-for="(items, index) in xfdata"
                >
                  锁定： {{ formatDates(items.startTime) }}-{{
                    formatDates(items.endTime)
                  }}
                </div>
                <div v-show="index > 2" class="gogd" @click="gogd"
                  >查看更多{{ '>' }}</div
                >
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div> -->

    <!-- 添加锁定记录弹窗 -->
    <a-modal
      class="df"
      v-model:visible="uploadShow"
      @cancel="uploadCancel"
      :on-before-ok="uploadCheck"
      :mask-closable="false"
      unmountOnClose
      width="450px"
    >
      <template #title> 锁定日期</template>
      <a-form ref="uploadModel" :rules="uploadRules" :model="uploadForm">
        <a-row style="margin-bottom: 16px">
          <a-form-item field="startTime" label="开始日期">
            <a-date-picker
              show-time
              v-model="uploadForm.startTime"
              format="YYYY-MM-DD HH:mm"
              value-format="YYYY-MM-DD HH:mm"
              :style="{ width: '100%' }"
              @change="xuanzhong"
              :disabledTime="disabledHours"
            />
          </a-form-item>
          <a-form-item field="endTime" label="结束日期">
            <a-date-picker
              show-time
              value-format="YYYY-MM-DD HH:mm"
              v-model="uploadForm.endTime"
              format="YYYY-MM-DD HH:mm"
              :style="{ width: '100%' }"
              :disabledTime="disabledHours"
              @change="xuanzhongs"
            />
          </a-form-item>
          <a-form-item field="duration" label="时长">
            <a-input
              :disabled="true"
              v-model="uploadForm.duration"
              placeholder="请输入时长"
              :defaultVisibility="false"
              allow-clear
            />
          </a-form-item>
        </a-row>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { Message } from '@arco-design/web-vue';
  import { ref, reactive, computed, watch } from 'vue';
  import Headmain from '../headmain/headmain.vue';
  import { saveRest, restList, getTimeConf } from '@/api/rest';
  import {
    getDaysInMonth,
    handleCrateDate,
    handleCreateDatePicker,
    parseTime,
  } from '@/utils/timeindex';
  import useLoading from '@/hooks/loading';
  import { useRouter } from 'vue-router';
  const { loading, setLoading } = useLoading(true);
  // 查询上班时间 对比
  const worktime = ref();
  const uploadshowfn = () => {
    getTimeConf().then((res) => {
      if (res.code == 200) {
        uploadShow.value = true;
        worktime.value = res.data;
        console.log('查询成功', res.data);
      }
    });
  };
  // 定义当页面标识
  const ymbsid = ref('3');

  // 定义 周一到周天
  const weeks = ref(['一', '二', '三', '四', '五', '六', '日']);
  // 当前年
  const curYear = ref(new Date().getFullYear());
  // 当前月
  const curMonth = ref(new Date().getMonth());
  // 当月总天数
  const days = ref();
  // 当前日期 yyyy-MM-dd 格式，用来匹配是否是当前日期
  const curDate = ref(parseTime(new Date().getTime()));
  // 非当前月的上一月展示的日期
  const prevDays = ref();
  // 非当前月的下一月展示的日期
  const rearDays = ref();
  // 当前月的日期
  const curDays = ref();
  // 总共展示的42个日期
  const showDays = ref();
  // 二维数组
  const res = ref();
  //   每周的开始日
  const startOfWeek = ref(1);

  // 初始化日期
  const handleGetDays = (year, month, startOfWeek) => {
    showDays.value = [];
    //   获取每个月的总天数
    days.value = getDaysInMonth(year, month);
    // 计算每个月的一天
    let firstDayOfWeek = new Date(`${year}-${month + 1}-01`).getDay();

    // 处理周起始日
    const obj = {
      1: '一',
      2: '二',
      3: '三',
      4: '四',
      5: '五',
      6: '六',
      0: '日',
    };
    const firstDayInCN = obj[firstDayOfWeek];

    const index = weeks.value.indexOf(firstDayInCN);

    // console.log(firstDayOfWeek, index);

    if (firstDayOfWeek == 0) {
      // 星期天为0 星期一为1 ，以此类推
      firstDayOfWeek = 7;
    }

    prevDays.value = handleCrateDate(year, month, 1, index + 1, 'prev');
    rearDays.value = handleCrateDate(
      year,
      month,
      1,
      42 - days.value - index,
      'rear'
    );

    curDays.value = handleCrateDate(year, month, 1, days.value, '');

    startDate.value = curDays.value[0].date;
    endDate.value = curDays.value[curDays.value.length - 1].date;
    // console.log('当前月份日期', startDate, endDate);
    // 请求数据
    //
    //请求结束
    showDays.value.unshift(...prevDays.value);

    showDays.value.push(...curDays.value);
    showDays.value.push(...rearDays.value);

    res.value = handleFormatDates(showDays.value);
  };
  const handleFormatDates = (arr: string | any[], size = 7) => {
    // 传入长度42的原数组，最终转换成二维数组
    const arr2 = [];
    for (let i = 0; i < size; i++) {
      const temp = arr.slice(i * size, i * size + size);
      arr2.push(temp);
    }

    return arr2;
  };

  const startDate = ref();
  const endDate = ref();
  handleGetDays(curYear.value, curMonth.value, startOfWeek.value);
  weeks.value.unshift(...weeks.value.splice(startOfWeek.value - 1));

  //   初始化日期结束

  //   当前选中日期
  const selectedDates = ref([]);
  const handleItemClick = (item, i, j) => {
    selectedDates.value = item.date;
    // console.log(
    //   '当前选中日期',
    //   selectedDates.value,
    //   xfdata.value,
    //   movedate.value
    // );
  };
  //   悬浮数据
  const xfdata = ref([]);
  const movedate = ref();
  //   悬浮查寻
  const hoverTimeout = ref(); // 用于存储计时器 ID

  const handleItemMove = (item) => {
    movedate.value = item.date;

    // // 清除之前的计时器，防止频繁触发
    // if (hoverTimeout.value) {
    //   clearTimeout(hoverTimeout.value);
    // }

    // 设置新的计时器

    const flag = isLocked(item.date);
    if (flag) {
      restList({
        pageNum: 1,
        pageSize: 200,
        startDate: item.date,
        endDate: item.date,
      }).then((res) => {
        if (res.code === 200) {
          xfdata.value = res.data.list;

          xfdata.value = res.data.list.map((record) => {
            // item.date 只有日期部分，补全为 00:00:00 和 23:59:59
            const startOfDay = `${item.date} 00:00:00`;
            const endOfDay = `${item.date} 23:59:00`;
            let newRecord = { ...record };
            if (new Date(record.startTime) < new Date(startOfDay)) {
              newRecord.startTime = startOfDay;
            }
            if (new Date(record.endTime) > new Date(endOfDay)) {
              newRecord.endTime = endOfDay;
            }
            return newRecord;

            return record;
          });

          // console.log('当前锁定时间', item.date, res.data.list);
        }
      });
    }
  };

  // 切换日期
  const handleQuickChange = (type) => {
    if (type === 'prev') {
      curMonth.value--;

      if (curMonth.value == -1) {
        curMonth.value = 11;
        curYear.value -= 1;
      }
    } else if (type === 'next') {
      curMonth.value++;
      if (curMonth.value == 12) {
        curMonth.value = 0;
        curYear.value += 1;
      }
    }
  };

  // 监听curMonth的变化
  watch(curMonth, (newVal) => {
    handleGetDays(curYear.value, newVal, startOfWeek.value);
  });

  // 监听curYear的变化
  watch(curYear, (newVal) => {
    handleGetDays(newVal, curMonth.value, startOfWeek.value);
  });

  //   初始化年 初始化月列表
  const monthOptions = ref(handleCreateDatePicker().months);
  const yearOptions = ref(handleCreateDatePicker().years);

  //   定义锁定日期
  const uploadShow = ref(false);
  const uploadModel = ref();

  const uploadForm = ref({
    startTime: '',
    endTime: '',
    duration: '',
  });

  const uploadRules = {
    //  /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!#$%^&*])[\da-zA-Z!#$%^&*]{8,16}$/

    startTime: [
      {
        required: true,
        message: '请选择开始时间',
      },
    ],
    endTime: [
      {
        required: true,
        message: '请选择结束时间',
      },
    ],
    duration: [
      {
        required: true,
        message: '请输入时长',
      },
    ],
  };

  const uploadCancel = () => {
    uploadShow.value = false;
    uploadForm.value = [];
  };

  const uploadCheck = (done) => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 1500);

    uploadModel.value.validate(
      async (errors: undefined | Record<string, ValidatedError>) => {
        if (!errors) {
          saveRest({
            ...uploadForm.value,
          }).then((res) => {
            if (res.code == '200') {
              Message.success({
                //   content: res.message,
                content: '修改成功!',
              });
              uploadForm.value = {};

              uploadShow.value = false;
              restListfn();
              done(true);
            } else {
              Message.success({
                //   content: res.message,
                content: res.message,
              });
              done(false);
            }
          });
        } else {
          done(false);
        }
      }
    );
  };

  //   cons
  const xuanzhong = (value) => {
    // console.log('选中开始日期', value);
    if (uploadForm.value.endTime) {
      const time = calculateWorkTime(
        worktime.value,
        value,
        uploadForm.value.endTime
      );
      console.log('计算时长完成', time);
      if (time.minutes != 0) {
        uploadForm.value.duration = time.hours + '.' + 5;
      } else {
        uploadForm.value.duration = time.hours;
      }
    }
  };
  const xuanzhongs = (value) => {
    // console.log('选中结束日期', value);
    if (uploadForm.value.startTime) {
      const time = calculateWorkTime(
        worktime.value,
        uploadForm.value.startTime,
        value
      );
      console.log('计算时长完成', time);
      if (time.minutes != 0) {
        uploadForm.value.duration = time.hours + '.' + 5;
      } else {
        uploadForm.value.duration = time.hours;
      }
    }
  };
  //   restList
  const reslistdata = ref([]);
  const restListfn = () => {
    restList({
      pageNum: 1,
      pageSize: 200,
    }).then((res) => {
      if (res.code == 200) {
        reslistdata.value = res.data.list;
        // console.log('查询成', res.data);
      }
    });
  };
  restListfn();

  const isLocked = (date) => {
    if (reslistdata.value.length <= 0) {
      return false;
    }
    // 转换为仅日期的格式
    const itemDate = new Date(date).toISOString().split('T')[0]; // 格式为 "YYYY-MM-DD"

    return reslistdata.value.some((rest) => {
      const startDate = new Date(rest.startTime).toISOString().split('T')[0];
      const endDate = new Date(rest.endTime).toISOString().split('T')[0];
      return itemDate >= startDate && itemDate <= endDate;
    });
  };

  const movefn = () => {
    console.log('鼠标移除');

    movedate.value = '';
    xfdata.value = [];
  };

  const formatDate = (dateString: string): string => {
    const date = new Date(dateString);
    const year = date.getFullYear();
    const month = date.getMonth() + 1; // 月份从 0 开始，需要加 1
    const day = date.getDate();
    const hours = date.getHours();
    const minutes = date.getMinutes();

    return `${year}年${month}月${day}日${hours
      .toString()
      .padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
  };
  const formatDates = (dateString: string): string => {
    const date = new Date(dateString);

    const hours = date.getHours();
    const minutes = date.getMinutes();

    return `${hours.toString().padStart(2, '0')}:${minutes
      .toString()
      .padStart(2, '0')}`;
  };
  const router = useRouter();
  const gogd = () => {
    router.push({
      name: 'user',
      query: {
        id: '2', // 使用查询字符串携带参数
      },
    });
  };
  const dateselect = ref(false);

  // const disabledHours = () => {
  //   // 禁用小时数 0 和 1
  //   return {
  //     disabledMinutes: () => [
  //       1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
  //       21, 22, 23, 24, 25, 26, 27, 28, 29, 31, 32, 33, 34, 35, 36, 37, 38, 39,
  //       40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57,
  //       58, 59,
  //     ],
  //   };
  // };
  const disabledHours = () => {
    return {
      disabledMinutes: () => {
        // 生成仅允许选择的分钟 00 和 30
        const allowedMinutes = [0, 30]; // 仅允许的分钟列表
        const allMinutes = Array.from({ length: 60 }, (_, i) => i); // 生成 0-59 的数组
        return allMinutes.filter((minute) => !allowedMinutes.includes(minute)); // 禁用不是 00 和 30 的分钟
      },
    };
  };

  // 计算时长工具

  // function calculateWorkTime(config, startTime, endTime) {
  //   //     [
  //   //     {
  //   //         "confKey": "rest_time",
  //   //         "confValue": "11:30-13:30"
  //   //     },
  //   //     {
  //   //         "confKey": "work_day",
  //   //         "confValue": "1,2,3,4,5"
  //   //     },
  //   //     {
  //   //         "confKey": "work_time",
  //   //         "confValue": "09:00-17:30"
  //   //     }
  //   // ]
  //   // 2025-06-26 14:30 2025-06-27 13:30
  //   console.log('当前配置信息', config, startTime, endTime);

  //   // Parse configuration
  //   const workTime = config
  //     .find((item) => item.confKey === 'work_time')
  //     .confValue.split('-');
  //   const restTime = config
  //     .find((item) => item.confKey === 'rest_time')
  //     .confValue.split('-');
  //   const workDays = config
  //     .find((item) => item.confKey === 'work_day')
  //     .confValue.split(',')
  //     .map(Number);

  //   const startDate = new Date(startTime);
  //   const endDate = new Date(endTime);

  //   const workStartHour = parseInt(workTime[0].split(':')[0]);
  //   const workStartMinute = parseInt(workTime[0].split(':')[1]);
  //   const workEndHour = parseInt(workTime[1].split(':')[0]);
  //   const workEndMinute = parseInt(workTime[1].split(':')[1]);

  //   const restStartHour = parseInt(restTime[0].split(':')[0]);
  //   const restStartMinute = parseInt(restTime[0].split(':')[1]);
  //   const restEndHour = parseInt(restTime[1].split(':')[0]);
  //   const restEndMinute = parseInt(restTime[1].split(':')[1]);

  //   let totalWorkMinutes = 0;

  //   // Helper function to calculate overlap in minutes
  //   function calculateOverlap(start1, end1, start2, end2) {
  //     const overlapStart = Math.max(start1, start2);
  //     const overlapEnd = Math.min(end1, end2);
  //     return Math.max(0, (overlapEnd - overlapStart) / (1000 * 60));
  //   }

  //   // Iterate through each day in the range
  //   for (
  //     let date = new Date(startDate);
  //     date <= endDate;
  //     date.setDate(date.getDate() + 1)
  //   ) {
  //     const dayOfWeek = date.getDay() === 0 ? 7 : date.getDay(); // Adjust Sunday to 7
  //     if (!workDays.includes(dayOfWeek)) {
  //       continue; // Skip non-workdays
  //     }

  //     // Define work start and end times for the current day
  //     const workStartTime = new Date(date);
  //     workStartTime.setHours(workStartHour, workStartMinute, 0, 0);
  //     const workEndTime = new Date(date);
  //     workEndTime.setHours(workEndHour, workEndMinute, 0, 0);

  //     // Define rest start and end times for the current day
  //     const restStartTime = new Date(date);
  //     restStartTime.setHours(restStartHour, restStartMinute, 0, 0);
  //     const restEndTime = new Date(date);
  //     restEndTime.setHours(restEndHour, restEndMinute, 0, 0);

  //     // Calculate overlap with the specified range
  //     const dailyStart =
  //       date.toDateString() === startDate.toDateString()
  //         ? startDate
  //         : workStartTime;
  //     const dailyEnd =
  //       date.toDateString() === endDate.toDateString() ? endDate : workEndTime;

  //     const workMinutes = calculateOverlap(
  //       dailyStart,
  //       dailyEnd,
  //       workStartTime,
  //       workEndTime
  //     );
  //     const restMinutes = calculateOverlap(
  //       dailyStart,
  //       dailyEnd,
  //       restStartTime,
  //       restEndTime
  //     );

  //     // Add effective work minutes for the day
  //     totalWorkMinutes += Math.max(0, workMinutes - restMinutes);
  //   }

  //   // Convert total minutes to hours and minutes
  //   const hours = Math.floor(totalWorkMinutes / 60);

  //   const minutes = totalWorkMinutes % 60;

  //   return { hours, minutes };
  // }
  function calculateWorkTime(config, startTime, endTime) {
    const workTime = config
      .find((item) => item.confKey === 'work_time')
      .confValue.split('-');
    const restTime = config
      .find((item) => item.confKey === 'rest_time')
      .confValue.split('-');
    const workDays = config
      .find((item) => item.confKey === 'work_day')
      .confValue.split(',')
      .map(Number);

    const startDate = new Date(startTime);
    const endDate = new Date(endTime);

    const workStartHour = parseInt(workTime[0].split(':')[0]);
    const workStartMinute = parseInt(workTime[0].split(':')[1]);
    const workEndHour = parseInt(workTime[1].split(':')[0]);
    const workEndMinute = parseInt(workTime[1].split(':')[1]);

    const restStartHour = parseInt(restTime[0].split(':')[0]);
    const restStartMinute = parseInt(restTime[0].split(':')[1]);
    const restEndHour = parseInt(restTime[1].split(':')[0]);
    const restEndMinute = parseInt(restTime[1].split(':')[1]);

    let totalWorkMinutes = 0;

    function calculateOverlap(start1, end1, start2, end2) {
      const overlapStart = Math.max(start1, start2);
      const overlapEnd = Math.min(end1, end2);
      return Math.max(0, (overlapEnd - overlapStart) / (1000 * 60));
    }

    let current = new Date(
      startDate.getFullYear(),
      startDate.getMonth(),
      startDate.getDate()
    );
    const last = new Date(
      endDate.getFullYear(),
      endDate.getMonth(),
      endDate.getDate()
    );

    while (current <= last) {
      const dayOfWeek = current.getDay() === 0 ? 7 : current.getDay();
      if (!workDays.includes(dayOfWeek)) {
        current.setDate(current.getDate() + 1);
        continue;
      }

      // 工作时间
      const workStartTime = new Date(current);
      workStartTime.setHours(workStartHour, workStartMinute, 0, 0);
      const workEndTime = new Date(current);
      workEndTime.setHours(workEndHour, workEndMinute, 0, 0);

      // 午休时间
      const restStartTime = new Date(current);
      restStartTime.setHours(restStartHour, restStartMinute, 0, 0);
      const restEndTime = new Date(current);
      restEndTime.setHours(restEndHour, restEndMinute, 0, 0);

      // 计算当天实际的起止
      let dailyStart = workStartTime;
      let dailyEnd = workEndTime;

      // 判断是否是起始天
      if (
        current.getFullYear() === startDate.getFullYear() &&
        current.getMonth() === startDate.getMonth() &&
        current.getDate() === startDate.getDate()
      ) {
        dailyStart = startDate > workStartTime ? startDate : workStartTime;
      }
      // 判断是否是结束天
      if (
        current.getFullYear() === endDate.getFullYear() &&
        current.getMonth() === endDate.getMonth() &&
        current.getDate() === endDate.getDate()
      ) {
        dailyEnd = endDate < workEndTime ? endDate : workEndTime;
      }

      const workMinutes = calculateOverlap(
        dailyStart,
        dailyEnd,
        workStartTime,
        workEndTime
      );

      let restMinutes = 0;
      if (workMinutes > 0) {
        const actualWorkStart = new Date(Math.max(dailyStart, workStartTime));
        const actualWorkEnd = new Date(Math.min(dailyEnd, workEndTime));
        restMinutes = calculateOverlap(
          actualWorkStart,
          actualWorkEnd,
          restStartTime,
          restEndTime
        );
      }

      totalWorkMinutes += Math.max(0, workMinutes - restMinutes);

      current.setDate(current.getDate() + 1);
    }

    const hours = Math.floor(totalWorkMinutes / 60);
    const minutes = totalWorkMinutes % 60;

    return { hours, minutes };
  }
</script>

<style scoped>
  .calendar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
  }
  .calendar-tablebox {
    width: 1630px;
    height: 818px;
    background: #ffffff;
    border-radius: 10px 10px 10px 10px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    overflow: hidden;
    margin: 0 auto;
    margin-top: 80px;
  }
  .calendar-table {
    width: 1630px;
    height: 818px;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    overflow: hidden;
    overflow-y: auto;
  }

  .calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 69px; /* 表头高度 */
    background-color: #fff;
  }
  .calendartop {
    width: 1625px;
    height: 69px;
    display: flex;
    margin: 0 auto;

    justify-content: space-between; /* 均匀分布 */
    align-items: center;
  }
  .calendartop .week-item {
    flex: 1;
    /* flex: 0 0 232.22px; */
    /* width: 232.22px; */
    height: 69px;
    font-size: 20px;
    color: #000000;
    text-align: center;
    border-right: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .calendartop .week-item:last-child {
    border-right: none;
  }

  .calendar-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* overflow-y: auto;
    padding-bottom: 50; */
    height: 800px;
  }

  .calendar-row {
    display: flex;
  }

  .calendar-cell {
    flex: 1;
    height: 150px;
    cursor: pointer;
    border-right: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    position: relative;
    /* background: red; */
  }

  /* .calendar-cell:first-child {
    border-left: 1px solid #ececec;
  } */

  .notCurMonth {
    color: #ffffff;
    background-color: #f5f6fa;
    opacity: 0.5;
  }

  .selectDay {
    color: #fff;
    background-color: #409eff;
  }

  .rangeSelectd {
    color: #606266;
    background-color: #dee2e9;
  }

  .weekend {
    color: #f73131;
  }

  .selectbox {
    width: 300px;
    height: 80px;
    display: flex;
    background-color: #fff;
    align-items: center;
    justify-content: center;
  }
  .selectbox .arco-form {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 50px auto;
  }
  .sxcur {
    font-size: 50px;
    cursor: pointer;
  }
  .selectbox .arco-form-item {
    margin-bottom: 0px;
  }
  .dfbox {
    position: relative;
  }
  .xhbox {
    width: 150px;
    padding: 20px 10px;
    background-color: #fff;
    border: 1px solid #999;
    position: absolute;
    right: 0px;
    z-index: 9;
    display: flex;
    flex-direction: column;
  }
  .xhitem {
    color: #999;
  }
  .daybs {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 999;
    font-size: 28px;
    color: #000000;
  }

  .date-switcher {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translate(-50%, 0);
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: Arial, sans-serif;
    z-index: 999;
  }
  .date-switcher div {
  }
  .date-switcher div img {
    width: 32px;
    height: 32px;
  }
  .date-display {
    font-size: 30px;
    font-weight: 550;
    color: #11565c;
    cursor: pointer;
  }

  .statusmonth {
    border-radius: 6px 6px 6px 6px;
    padding: 7px 10px;
    position: absolute;
    left: 12px;
    top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .statusicon {
    width: 15px;
    height: 15px;
    margin-right: 7px;
  }
  .statusmonth span {
    margin-top: 1px;
  }
  .old {
    background: #e9edf2;
    color: #5e676f;
  }
  .new {
    background: #e1f2b7;
    color: #5e8d0a;
  }
  .live {
    background: #b2e2eb;
    color: #197b82;
  }
  .jdrbox {
    width: 204px;
    height: 88px;
    background: #e9edf2;
    border-radius: 6px 6px 6px 6px;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translate(-50%, 0);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .jdrbox span {
    display: block;
  }
  .span1 {
    color: #9da5ad;
    font-size: 16px;
  }
  .span2 {
    color: #5e676f;
    font-size: 30px;
  }
  .jdrboxnew {
    background: #e1f2b7;
  }
  .jdrboxnew .span1 {
    color: #5e8d0a;
    font-size: 16px;
  }
  .jdrboxnew .span2 {
    color: #5e8d0a;
    font-size: 30px;
  }

  .jdrboxlive {
    background: #b2e2eb;
  }
  .jdrboxlive .span1 {
    color: #197b82;
    font-size: 16px;
  }
  .jdrboxlive .span2 {
    color: #197b82;
    font-size: 30px;
  }

  .suobox {
    width: 108px;
    height: 46px;
    background: #1e657b;
    border-radius: 10px 10px 10px 10px;
    font-size: 20px;
    color: #e7f2f3;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 20px;
    left: 250px;
    cursor: pointer;
  }
  .suobs {
    width: 230px;
    height: 148px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #9c20da;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 9;
  }
  .suobs:hover {
    background-image: url('../../assets/images/subj.png');
    background-size: cover; /* 确保背景图片覆盖整个区域 */
    background-repeat: no-repeat; /* 防止背景图片重复 */
    background-position: center; /* 图片居中显示 */
  }
  .suobs img {
    width: 40px;
    height: 40px;
  }
  .xfboxs {
    position: absolute;
    bottom: 50px;
    right: 0px;
    text-align: left;
    font-size: 20px;
    width: 220px;
    max-height: 178px;
    background: #ffffff;
    box-shadow: 0px 4px 11px 0px rgba(0, 0, 0, 0.25);
    border-radius: 10px 10px 10px 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    z-index: 99999;
  }
  .xfboxs div {
    width: 220px;
    overflow: hidden;
    text-align: center;
    margin: 10px 0;
  }
  .gogd {
    color: #11565c;
    margin-top: 40px;
  }
</style>
